<script lang="ts" setup>
import { defineOptions } from 'vue'
import { useEditStore } from '@/store/index'

defineOptions({
  name: 'EditIndicator'
})
defineProps<{
  cellId: string
}>()
const editStore = useEditStore()
</script>

<template>
  <div v-if="editStore.editingCells.get(cellId)" class="editing-indicator">
    <a-tag size="small" class="editing-tag">
      <template #icon>
        <a-avatar :size="16" :image-url="editStore.editingCells.get(cellId)?.editorInfo.avatar">
          {{ editStore.editingCells.get(cellId)?.editorInfo.name?.[0] }}
        </a-avatar>
      </template>
      {{ editStore.editingCells.get(cellId)?.editorInfo.name }}
    </a-tag>
  </div>
</template>

<style scoped>
.editing-indicator {
  position: absolute; /* 改为绝对定位 */
  z-index: 2; /* 确保显示在内容上层 */
}

.editing-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 20px; /* 稍微降低高度使其更紧凑 */
  background-color: var(--color-primary-light-1);
  color: rgb(var(--primary-6));
  border: 1px solid var(--color-primary-light-3);
  border-radius: 10px; /* 增加圆角效果 */
  white-space: nowrap;
  font-size: 12px; /* 减小字体大小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  max-width: 128px; /* 添加最大宽度限制 */
}

/* 添加文本溢出处理 */
.editing-tag :deep(.arco-tag-content) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px; /* 为头像预留空间 */
}
</style>
